<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100vh;
}
</style>

<template>
  <div id="map"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import L from "leaflet";
import "@/plugins/leaflet.labelLinePopup";
import "leaflet/dist/leaflet.css";
let map: L.Map | null = null;

onMounted(() => {
  map = L.map("map").setView([0, 0], 5);
  const marker = L.marker([0, 0]).addTo(map);
  const dom = document.createElement("div");
  dom.innerHTML = "Hello Leaflet";
  dom.style.backgroundColor = "red";
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
  // const popup = L.labelLinePopup({
  //   offset: L.point(250, -100),
  // })
  //   .setContent(dom)
  //   .setLatLng([29.56, 106.55])
  //   .addTo(map);
});
</script>
